

<template>
  <!-- 顶部导航 -->
  <header class="main-header">
    <div class="header-content container">
      <div class="university-brand">
        <img class="logo" :style="{ width: logoWidth + 'px' }" id="logo" :src="LogoUrl">
        <div class="brand-text">
          <h1>{{title}}</h1>
          <p>Career Development Center</p>
        </div>
      </div>
      <nav class="header-nav">
        <router-link to="/">
          <el-link :underline="false" class="nav-item">首页</el-link>
        </router-link>
        <a v-for="item in YqljData" class="nav-item" :key="item.id" :href="item.ljdz" target="_blank">{{item.ljbt}}</a>
      </nav>
    </div>
  </header>
</template>

<script>
import axios from 'axios'
export default {
  name: "PublicMenu2",
  data() {
    return {
      YqljData: [],
      title: "广西中医药大学就业平台",
      LogoUrl: "@/assets/logo.png",
      logoWidth: 209,
    }
  },
  methods: {
    async getYqlj() {

      try {
        const res = await axios.get("/yqljk/getAllYqljk");
        this.YqljData = res.data.data;
      } catch (e) {
        console.error("加载数据失败", e);
      }
    },
    getParams() {
      axios.post('/config/getSemsConfigByIds',
          [19, 20,21] ,
          { headers: { 'Content-Type': 'application/json' } }
      ).then(response => {
        this.title = response.data.find(item => item.id === 19).value;
        this.LogoUrl = response.data.find(item => item.id === 20).value;
        this.logoWidth = response.data.find(item => item.id === 21).value;
      }).catch(error => {
          this.$message.error('获取配置信息失败，请联系管理员');
      });
    }
  },
  created() {
    this.getParams();
    this.getYqlj();
  },
  mounted() {
  }
}
</script>

<style scoped>
/* 整体背景 */
.home-container {
  background: #f8f9fa;
}

/* 顶部导航 */
.main-header {
  background: linear-gradient(135deg, #2c3e50, #3498db);
  color: white;
  padding: 1rem 0;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.university-brand {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.logo {
  border-radius: 8px;
}

.brand-text h1 {
  margin: 0;
  font-size: 1.8rem;
}

.brand-text p {
  margin: 0;
  font-size: 0.9rem;
  opacity: 0.9;
}

.header-nav {
  display: flex;
  gap: 2rem;
}

.nav-item {
  color: white !important;
  font-size: 1.1rem;
  transition: 0.3s;
}

.nav-item:hover {
  color: #a0cfff !important;
}
</style>